import React from 'react';
import ReactDOM from 'react-dom';
import Dropzone from 'react-dropzone';
import ReactScrollbar from 'react-scrollbar-js';
require("./home.css");


class Import extends React.Component{

    constructor(){
        super();
        this.state = {
            uploadedFile: null,
            batchImport: null,
            batchLength: null,
            response: null
        }
    }

    // 拖拽本地excel，注意！！excel中第一行必须合并单元格，第一列为姓名，第二列为身份证，第三列为手机号码
    onExcelDrop(files) {
        console.log("33");
        this.setState({
            uploadedFile: files[0]
        });
        console.log("22");
        this.handleExcelAnalysis(files[0]);
    }

    // 解析excel内容
    handleExcelAnalysis(file) {
        console.log("11");
        console.log(file.name);
        fetch("http://120.27.214.53/ZhiXin2", {
            method: "POST",
            headers: {},
            body: file
        }) .then((response) => response.json())
            .then((responseText) => {
                console.log(responseText);
                this.setState({batchImport:responseText});
                this.setState({batchLength:responseText.length});
                console.log(JSON.stringify(responseText));
            }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }

    handleUpdate(){
        if(this.state.uploadedFile == null){
            alert("请先添加相应的excel文件，再点击上传！");
        }else{
            fetch("http://121.196.202.247:1010/much_tuser/?format=json", {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json; charset=utf-8"
                },
                body: JSON.stringify({
                    ds: this.state.batchImport
                })
            }).then((response) => response.json())
                .then((responseText) => {
                    this.setState({response:responseText});
                    console.log("33333" + responseText);
                    console.log("33333" + JSON.stringify(responseText));
                }).catch((error) => {
                alert(error + "连接职信服务器失败，请查看网络连接状态并刷新页面！")
            });
        }
    }

    // 下载按钮监听事件
    handleDownload(){
        window.open('http://zhixin-image.oss-cn-hangzhou.aliyuncs.com/example.xlsx', '_blank');
    }


    render() {

        const style = {
            scroll:{
                width: "420px",
                height: "300px",
            }
        };

        let body = [];
        console.log(this.state.batchImport);
        if(this.state.batchImport == null){
            body.push(<p>请先选择excel并上传！</p>);
        }else{
            if(this.state.response != null) {
                body.length = 0;
                if (this.state.response.user_id == 'fail') {
                    body.push(<p>您共批量注册了{this.state.batchLength}条信息，其中有人已经有职信号，请先检查一遍再选择上传。</p>);
                } else {
                    body.push(
                        <div>
                            <p>批量注册成功！您共批量注册了{this.state.batchLength}条信息，以下是您刚刚注册的员工，初始密码为身份证后六位。</p>
                            <hr/>
                        </div>
                    );
                    for (let i = 0; i < this.state.response.length; i++) {
                        body.push(
                            <div>
                                <p>职信号：{this.state.response[i].user_id}</p>
                                <p>姓名：{this.state.response[i].user_name}</p>
                                <p>身份证：{this.state.response[i].user_id_card}</p>
                                <hr/>
                            </div>
                        );
                    }
                }
            }else {
                body.length = 0;
                body.push(<p>您共批量注册了{this.state.batchLength}条信息，点击上传按钮，将提交到职信服务器。</p>);
            }
        }

        return(
            <div className="import_box">
                <div>
                    <p>格式化文件批量导入</p><br/>
                    <div className="import_intro">
                        <p>excel模板下载</p>
                    </div>
                    <input type="button" value="下载" className="file_download" onClick={this.handleDownload.bind(this)}/>
                    <form>
                        <Dropzone onDrop={this.onExcelDrop.bind(this)} multiple={false} accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" className="import_file">
                            <p>点击或者拖拽以上传本地excel</p>
                            <div>
                                {
                                    this.state.uploadedFile == null ? null :
                                    <div>
                                        <p>已选择文件：{this.state.uploadedFile.name}</p>
                                    </div>
                                }
                            </div>
                        </Dropzone>
                    </form>
                    <input type="button" value="上传" className="file_commit" onClick={this.handleUpdate.bind(this)}/>
                </div>
                <br/><br/>
                <hr/>
                <br/>
                <div>
                    {
                        this.state.batchImport == null ? null :
                        <div className="import_user_info">
                            <ReactScrollbar style={style.scroll}>
                                <div>
                                    {body}
                                    <hr/>
                                </div>
                            </ReactScrollbar>
                        </div>
                    }
                </div>


                    {/*<p>手动批量导入</p><br/>*/}
                    {/*<table className="import_table">*/}
                        {/*<tr>*/}
                            {/*<td className="import_left">姓名：</td>*/}
                            {/*<td className="import_right">身份证号：</td>*/}
                            {/*<td className="import_left">手机号码：</td>*/}
                        {/*</tr>*/}
                        {/*<tr>*/}
                            {/*<td className="import_left"><input type="text" className="info_name"/></td>*/}
                            {/*<td className="import_right"><input type="text" className="info_id"/></td><br/>*/}
                        {/*</tr>*/}
                    {/*</table><br/>*/}
                    {/*<input type="button" value="添加" className="info_add" onClick={function (e) {this.addComponent()}.bind(this)}/>*/}
                    {/*<input type="button" value="减去" className="info_add" onClick={function (e) {this.deleteComponent()}.bind(this)}/>*/}
                    {/*<input type="button" value="上传" className="info_commit" />*/}
                    {/*<input type="button" value="重置" className="info_cancel"/>*/}
            </div>
        );
    }
}

export default Import;